import React, { Component, createRef } from 'react'
import { ForceGraph3D } from 'react-force-graph'
import { connect } from 'react-redux'

// import { Mesh, TextureLoader, SphereGeometry, MeshBasicMaterial } from 'three'

import { fetchOverallGraph } from '../../actions/overall'

import Legend from './Legend'
import Search from './Search'
import Title from './Title'
import './index.less'

class Overall extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
        this.graphRef = createRef()
    }

    componentDidMount() {
        this.props.fetchOverallGraph()
        console.log(this.graphRef)
    }

    render() {
        const { graphData, isLoading } = this.props

        return (
            isLoading
            ?
            <>
                <div className="graph-overall">
                    <ForceGraph3D 
                        ref={this.graphRef}
                    />
                </div>
                <Search graph={this.graphRef.current} />
                <Title />
                <Legend />
            </>
            :
            <>
                <div className="graph-overall">
                    <ForceGraph3D 
                        ref={this.graphRef}
                        // Data Input
                        graphData={graphData}
                        // Container Layout
                        height={864}
                        width={1640}
                        backgroundColor="rgba(255, 255, 255, 0)"
                        showNavInfo={false}
                        // Node Styling
                        nodeColor='color'
                        nodeLabel='desc'
                        // nodeThreeObject={(node) => {
                        //     if(node.group === '独子线产能') {
                        //         const texture = new TextureLoader().load(require('../../assets/img/blocking_point.png'))
                        //         const geometry = new SphereGeometry(5)
                        //         const material = new MeshBasicMaterial({ map: texture })
                        //         const obj = new Mesh(geometry, material)
                        //         return obj
                        //     }
                        // }}
                        // Link Styling
                        linkWidth={0.5}
                        linkColor='color'
                        linkOpacity={0.4}
                        linkDirectionalArrowLength={1}
                        linkDirectionalArrowRelPos={1}
                        linkDirectionalParticles={1}
                        // Interaction
                        onNodeHover={(node) => {
                            document.body.style.cursor = node ? 'pointer' : null 
                        }}
                        onNodeClick={(node) => {
                            const distance = 40
                            const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z)

                            this.graphRef.current.cameraPosition(
                                {
                                    x: node.x * distRatio,
                                    y: node.y * distRatio,
                                    z: node.z * distRatio
                                }, 
                                node,
                                3000
                            )
                        }}
                    />
                </div>
                <Search graph={this.graphRef.current} />
                <Title />
                <Legend />
            </>
        )
    }
}

const mapStateToProps = (state) => ({
    graphData: state.overall.updateGraph,
    isLoading: state.overall.isLoading
})

export default connect(mapStateToProps, { fetchOverallGraph })(Overall)